<template>
  <div jdd.route-write-back="['formValidate']">
    <Jdd-Card :padding="16" style="margin-bottom:16px;">
      <div style="font-size: 16px;font-weight:600;">查询表格</div>
      <div style="margin-top:12px;">表格中高级查询、多操作按钮、提示信息的复合示例。列表中文字、数据、时间、状态、链接，下拉详情6种元素的展示方式以及相对应的表头范例。</div>
    </Jdd-Card>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
      <Row type="flex" justify="end" :gutter="16">
        <Col :xs="24" :sm="24" :md="12" :lg="8">
          <FormItem :label="$t('table.selectTable.appName')+'：'" prop="appName">
            <Jdd-Input type="text" v-model="formValidate.appName" />
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="8">
          <FormItem :label="$t('table.selectTable.appType')+'：'" prop="appType">
            <Jdd-Select
              v-model="formValidate.appType"
              :option="appTypeList"
              label-name="text"
              value-name="code"
            ></Jdd-Select>
          </FormItem>
        </Col>
        <template v-if="openClose">
          <Col :xs="24" :sm="24" :md="12" :lg="8">
            <FormItem label="IP查询：" prop="ip">
              <Jdd-Input placeholder="请输入" v-model="formValidate.ip">
                <Jdd-Select
                  slot="prepend"
                  placeholder="精准查询"
                  style="width: 80px"
                  v-model="formValidate.ipType"
                  :option="ipSearchList"
                  label-name="text"
                  value-name="code"
                ></Jdd-Select>
              </Jdd-Input>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="12" :lg="8">
            <FormItem label="时间范围：" prop="date">
              <Jdd-DatePicker
                ref="datePicker"
                startTime="formValidate.startTime"
                endTime="formValidate.endTime"
                :doRoute="true"
              ></Jdd-DatePicker>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="12" :lg="8">
            <FormItem label="实例数：">
              <Jdd-InputRange
                min="formValidate.instanceMin"
                max="formValidate.instanceMax"
                :range="[0,100]"
              ></Jdd-InputRange>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="12" :lg="8">
            <FormItem label="通知类型：" prop="noticeType">
              <CheckboxGroup v-model="formValidate.noticeType">
                <Checkbox label="1">咚咚</Checkbox>
                <Checkbox label="2">邮箱</Checkbox>
                <Checkbox label="3">微信</Checkbox>
                <Checkbox label="4">外呼</Checkbox>
                <Checkbox label="5">QQ</Checkbox>
              </CheckboxGroup>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="12" :lg="8">
            <FormItem label="告警级别：" prop="alarmLevel">
              <RadioGroup v-model="formValidate.alarmLevel">
                <Radio label="1">调试</Radio>
                <Radio label="2">通知</Radio>
                <Radio label="3">警告</Radio>
                <Radio label="4">严重</Radio>
                <Radio label="5">紧急</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="12" :lg="8">
            <FormItem label="告警开关：" prop="alarmSwitch">
              <Jdd-SwitchText v-model="switchVal" size="large" :text="['on','off']"></Jdd-SwitchText>
            </FormItem>
          </Col>
        </template>
        <Col :xs="24" :sm="24" :md="12" :lg="8" style="text-align: right;">
          <Jdd-BtnSearch :form="'formValidate'" @click="btnSearch"></Jdd-BtnSearch>
          <Jdd-BtnReset :form="'formValidate'"></Jdd-BtnReset>
          <Jdd-ShowHidden v-model="openClose"></Jdd-ShowHidden>
        </Col>
      </Row>
    </Form>
    <Divider dashed />
    <div>
      <Jdd-TablePage ref="dataTable" v-bind="table" @on-selection-change="selectItem">
        <Jdd-BtnSubmit
          :beforeClick="()=>{this.modalShow=true; this.modalFlag='create'}"
        >{{$t('table.selectTable.createApp')}}</Jdd-BtnSubmit>
        <Jdd-BtnUpdate :beforeClick="beforeBtnBatchUpdate">批量修改</Jdd-BtnUpdate>
        <Jdd-BtnDelete :beforeClick="beforeBtnBatchDelete" @click="btnBatchDelete">批量删除</Jdd-BtnDelete>
        <Jdd-BtnDefault @click="exportData">导出Csv</Jdd-BtnDefault>
        <Dropdown>
          <Button>
            更多操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>发布</DropdownItem>
            <DropdownItem>上线</DropdownItem>
            <DropdownItem disabled>施工</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <template slot-scope="{ row, index }" slot="action">
          <Jdd-Icon
            @click="btnIcon(row,index)"
            type="icon-details"
            size="18"
            title="详情信息"
            disabled
          />
          <Jdd-BtnUpdate icon :beforeClick="()=>beforeBtnUpdate(row)" disabled title="修改信息"></Jdd-BtnUpdate>
          <Jdd-BtnDelete icon @click="(bool,Proxy) => bool && btnDelete(Proxy,row.id)"></Jdd-BtnDelete>
          <Dropdown>
            <Jdd-BtnDefault
              type="info"
              icon="icon-openMore"
              :title="$t('detail.senior.tab.iconMore')"
            ></Jdd-BtnDefault>
            <DropdownMenu slot="list">
              <DropdownItem>
                <div style="text-align:left;" @click="handleClick(row)">
                  <Jdd-Icon
                    type="icon-historySearch"
                    color="#000"
                    :title="$t('detail.senior.tab.iconHistory')"
                    size="16"
                    style="cursor: pointer;margin-right:8px;"
                  />
                  <span>{{$t('detail.senior.tab.iconHistory')}}</span>
                </div>
              </DropdownItem>
              <DropdownItem>
                <div style="text-align:left;" @click="handleClick(row)">
                  <Jdd-Icon
                    type="icon-notification"
                    color="#000"
                    :title="$t('detail.senior.tab.iconEdit')"
                    size="16"
                    style="cursor: pointer;margin-right:8px;"
                  />
                  <span>{{$t('detail.senior.tab.iconEdit')}}</span>
                </div>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Jdd-TablePage>
      <Jdd-FormModal
        v-model="modalShow"
        :title="modalFlag==='create'?'新增应用':'修改应用'"
        form="modalForm"
        @click="formModalClick"
        :beforeClick="formModalBeforeClick"
      >
        <Form ref="modalForm" :model="modalForm" :rules="ruleModalForm" :label-width="100">
          <FormItem label="应用名称：" prop="appName" v-if="modalFlag!=='batchUpdate'">
            <Jdd-Input
              type="text"
              v-model="modalForm.appName"
              placeholder="后端验证输入sgm或dnp可看效果"
              :disabled="modalFlag==='update'||modalFlag==='detail'"
            />
          </FormItem>
          <FormItem label="IP：" prop="ip" v-if="modalFlag!=='batchUpdate'">
            <Jdd-Input
              type="text"
              v-model="modalForm.ip"
              placeholder="127.0.0.1"
              :disabled="modalFlag==='detail'"
            />
          </FormItem>
          <FormItem label="应用类型：" prop="appType">
            <Jdd-Select
              v-model="modalForm.appType"
              :option="appTypeList"
              label-name="text"
              value-name="code"
              :disabled="modalFlag==='detail'"
            ></Jdd-Select>
          </FormItem>
          <FormItem label="通知类型：" prop="noticeType">
            <CheckboxGroup v-model="modalForm.noticeType">
              <Checkbox label="咚咚" :disabled="modalFlag==='detail'">咚咚</Checkbox>
              <Checkbox label="邮箱" :disabled="modalFlag==='detail'">邮箱</Checkbox>
              <Checkbox label="微信" :disabled="modalFlag==='detail'">微信</Checkbox>
              <Checkbox label="外呼" :disabled="modalFlag==='detail'">外呼</Checkbox>
              <Checkbox label="QQ" :disabled="modalFlag==='detail'">QQ</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </Form>
        <template slot="footerBar" v-if="modalFlag!=='detail'">
          <Jdd-BtnReset form="modalForm"></Jdd-BtnReset>
        </template>
      </Jdd-FormModal>
    </div>
  </div>
</template>

<script>
import selectTable from './selectTable'
export default selectTable
</script>
